<script setup>
import { onMounted, ref, onUnmounted } from 'vue';
import { selectSelfDe } from '@/api/attendance';
import {insertInfo}  from '@/api/attendance'
import { useUserStore } from '@/stores/user';
import { selectTime} from '@/api/attendance'
import { ElMessage } from 'element-plus'
const early = ref('上班打卡');
const eartime = ref('');
const lasttime = ref('');
const currentTime = ref(''); // 实时时间

const da1 =ref('未打卡')
const da2 =ref('未打卡')
// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = now.getHours().toString().padStart(2, '0');
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  currentTime.value = `${hours}:${minutes}:${seconds}`;
};

const userStore = useUserStore()



// 每秒更新一次时间
let timer = null;

// 在组件挂载时启动定时器
onMounted(() => {
  InfoTime()
  selectInfo();
  updateTime(); // 立即更新一次时间
  timer = setInterval(updateTime, 1000);
});

// 在组件卸载时清除定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
});

// 获取打卡信息
const selectInfo = async () => {
  const res = await selectSelfDe();
  if (res) {
    eartime.value = res.data.data.earlyTime;
    lasttime.value = res.data.data.lateTime;
  }
};


//提前获取打卡信息

const InfoTime = async() =>{
  const res = await selectTime({
       userid:userStore.user.id
  })
  console.log(res);
  if(res){
    da1.value = res.data.data
    if(da1.value == "已打卡"){
      early.value="下班打卡"
    }
    if(res.data.data=="已经打卡完毕"){
      da1.value = "已打卡"
      da2.value = "已打卡"
      early.value="下班打卡"
    }
  }
}





const time = async(currentTime) =>{
  if(da2.value == "已打卡"){
     return da2.value
  }

  if(early.value=="上班打卡"){
    const res = await insertInfo({
      earlyTime : currentTime,
      userid : userStore.user.id
    })
    if(res.data.code=="200"){
      da1.value = "已打卡"
      ElMessage.success("上班打卡成功")
    }
    console.log(res.data.code);
    
  }
  if(early.value == "下班打卡"){
    const res = await insertInfo({
      lateTime : currentTime,
      userid : userStore.user.id
    })
    if(res.data.code=="200"){
      da2.value = "已打卡"
      ElMessage.success("下班打卡成功")
    }
  }
  early.value = "下班打卡"
}




</script>










<template>
  <div>
    <el-row>
      <el-col :span="8" class="leftcont">
        <div class="outside">
          <div class="left">
            <div class="time-label">上班时间</div>
            <div class="time-value">{{ eartime }}</div>
            <div class="status">{{da1}}</div>
          </div>
          <div class="right">
            <div class="time-label">下班时间</div>
            <div class="time-value">{{ lasttime }}</div>
            <div class="status">{{da2}}</div>
          </div>
        </div>
        <div id="box" @click="time(currentTime)">
          <div class="content">
            <span>{{ early }}</span>
            <span class="time">{{ currentTime }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="16">
        <el-calendar>
          <template #date-cell="{ data }">
            <p :class="data.isSelected ? 'is-selected' : ''">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
            </p>
          </template>
        </el-calendar>
      </el-col>
    </el-row>
  </div>
</template>



<style scoped>
.is-selected {
  color: #1989fa;
}

/* 打卡按钮样式 */
#box {
  width: 300px;
  height: 300px; 
  border-radius: 50%;
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 20px rgba(79, 172, 254, 0.5);
  margin:  auto;
  margin-top: 80px;
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
}

#box:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 30px rgba(79, 172, 254, 0.6);
}

.content {

  margin: 0 auto;
  color: white;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.content span {
  display: block;
}

.content .time {
  font-size: 18px;
  margin-top: 5px;
}

/* 打卡信息区域样式 */
.outside {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.left, .right {
  width: 140px;
  padding: 15px;
  border-radius: 10px;
  background-color: #f5f6fa;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  text-align: center;
}
.time-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.time-value {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.status {
  font-size: 14px;
  color: #ff6b6b;
}

/* 日历样式 */
.el-calendar {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
</style>